<template>
  <!-- 组件库 -->
  <div class="ComponentLibrary">
    <div class="titleName">组件库</div>

    <!-- 基础组件 -->
    <div class="utils">
      <div class="title">基础组件</div>
      <div class="hx"></div>
      <div class="assemblyItem">
        <el-button>文字</el-button>
        <el-button>图片</el-button>
        <el-button>按钮</el-button>
        <el-button>矩形边框</el-button>
        <el-button>分割线</el-button>
        <el-button>图片轮播</el-button>
        <el-button>内嵌iframe</el-button>
        <el-button>地图</el-button>
        <el-button>视频</el-button>
      </div>
    </div>

    <!-- 表单组件 -->
    <div class="utils">
      <div class="title">表单组件</div>
      <div class="hx"></div>
      <div class="assemblyItem">
        <el-button>文本框</el-button>
        <el-button>单选框</el-button>
        <el-button>复选框</el-button>
        <el-button>日期选择器</el-button>
        <el-button>时间选择器</el-button>
        <el-button>日期时间</el-button>
      </div>
    </div>

    <!-- 功能组件 -->
    <div class="utils">
      <div class="title">功能组件</div>
      <div class="hx"></div>
      <div class="assemblyItem">
        <el-button>音乐</el-button>
        <el-button @click="handleBox">方块</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ComponentLibrary",
  data() {
    return {};
  },
  methods: {
    handleBox() {
      // this.$parent.$refs.DrawingBoard.$refs.childBox;
      console.log(this.$parent.$refs.DrawingBoard.$refs.childBox);
    },
  },
};
</script>

<style lang="less" scoped>
.ComponentLibrary {
  background-color: #fff;
  padding: 0 20px;

  .titleName {
    font-size: 24px;
    text-align: center;
    padding: 10px 0;
  }

  .utils {
    .hx {
      margin: 10px 0;
    }
    .assemblyItem {
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .el-button {
        width: 100px;
        margin: 0 0 10px;
      }
    }
  }
}
</style>
